<!-- 车牌号管理 -->
<template>
  <view class="license-plate">
    <view class="container">
      <!-- Empty state -->
      <view v-if="!licensePlates.length" class="empty-state">
        <view class="empty-text">
          <image
            style="width: 200rpx; height: 200rpx"
            src="/static/chepaikongzhuangtai.png"
          />
        </view>
      </view>

      <!-- License plate list -->
      <view v-else class="plate-list">
        <view
          v-for="(plate, index) in licensePlates"
          :key="index"
          class="plate-item"
          @click="selectCurrentPlate(plate)"
        >
          <view class="plate-left">
            <view class="plate-icon"></view>
            <text class="plate-number">{{ plate.licenseNumber }}</text>
            <text class="plate-tag" v-if="plate.type == '0'">默认</text>
          </view>
          <view class="plate-right">
            <text class="edit-btn" @tap="editPlate(plate)">修改</text>
            <view class="select-circle" @tap="selectPlate(plate)">
              <view v-if="plate.type == '0'" class="selected-dot"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- Add button -->
      <view class="add-btn" @tap="addPlate">添加车牌号</view>
    </view>

    <license-plate-keyboard
      :show.sync="showKeyboard"
      @confirm="handlePlateConfirm"
      :editing-plate="editingPlate"
    />
  </view>
</template>

<script>
import LicensePlateKeyboard from "@/components/license-plate-keyboard.vue";

export default {
  components: {
    LicensePlateKeyboard,
  },
  data() {
    return {
      showKeyboard: false,
      editingPlate: null,
      licensePlates: [],
    };
  },
  mounted() {
    this.getLicensePlateList();
  },
  methods: {
    selectCurrentPlate(plate) {
      uni.navigateBack({
        success() {
          uni.$emit("licenseNumberFun", plate.licenseNumber);
        },
      });
    },
    getLicensePlateList() {
      this.$httpReq.getLicensePlateList().then((res) => {
        this.licensePlates = res.data;
      });
    },
    addPlate() {
      this.showKeyboard = true;
    },
    handlePlateConfirm(plateNumber) {
      if (this.editingPlate) {
        this.$httpReq
          .saveLicensePlate({
            id: this.editingPlate.id,
            licensePlate: plateNumber,
          })
          .then((res) => {
            console.log(res);
            this.getLicensePlateList();
          });
        this.editingPlate = null;
      } else {
        this.$httpReq
          .saveLicensePlate({
            licensePlate: plateNumber,
          })
          .then((res) => {
            console.log(res);
            this.getLicensePlateList();
          });
      }
      this.showKeyboard = false;
    },
    editPlate(plate) {
      console.log(plate);
      this.editingPlate = plate;
      this.showKeyboard = true;
    },
    selectPlate(plate) {
      this.$httpReq
        .setDefaultLicensePlate({
          id: plate.id,
        })
        .then((res) => {
          this.getLicensePlateList();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.license-plate {
  padding: 20rpx;

  .empty-state {
    margin: 100rpx auto;
    text-align: center;
    // border: 2rpx solid #eee;
    padding: 40rpx;

    .empty-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20rpx;
      color: #999;
    }
  }

  .plate-list {
    .plate-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;

      .plate-left {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .plate-icon {
          width: 80rpx;
          height: 80rpx;
          background: #ccc;
          border-radius: 50%;
        }

        .plate-tag {
          font-size: 24rpx;
          color: #666;
          border: 1rpx solid #666;
          padding: 2rpx 10rpx;
          border-radius: 4rpx;
        }
      }

      .plate-right {
        display: flex;
        align-items: center;
        gap: 30rpx;

        .edit-btn {
          color: #007aff;
          font-size: 28rpx;
        }

        .select-circle {
          width: 40rpx;
          height: 40rpx;
          border: 2rpx solid #999;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .selected-dot {
            width: 24rpx;
            height: 24rpx;
            background: #ff5b5b;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .add-btn {
    position: fixed;
    bottom: 40rpx;
    left: 20rpx;
    right: 20rpx;
    background: #666;
    color: #fff;
    text-align: center;
    padding: 24rpx 0;
    border-radius: 8rpx;
  }
}
</style> 